/*
 * @Author: huangyingli
 * @Date: 2023-02-26 22:19:09
 * @LastEditors: huangyingli
 * @LastEditTime: 2023-02-27 00:06:31
 * @Description:
 */
import React from 'react';

export default function ProductAdvantage(props) {
  function getData() {
    if (props.value) {
      return props.value;
    } else {
      return {
        title: '产品优势',
        advantage: [
          {
            id: 1,
            title: '弹性计算',
            icon: 'https://www.unicloud.com/upload/images/2021/6/894bac3a1af30ca1.png',
            description:
              '提供丰富的云主机实例配置选择，和丰富的操作系统镜像类型，并支持按需弹性配置云主机的CPU、内存、硬盘和网络带宽以高效匹配业务要求。您可随时灵活调整IT资源，节约IT成本。',
          },
        ],
      };
    }
  }
  return (
    <>
      <div className='product-advantage'>
        <div className='title'>{getData()?.title}</div>
        <div className='advantage'>
          {getData()?.advantage &&
            getData()?.advantage.map((ad) => (
              <div className='item' key={ad.id}>
                <div
                  className='icon'
                  style={{ backgroundImage: `url(${ad.icon})` }}
                ></div>
                <div className='tit'>{ad.title}</div>
                <div className='des'>{ad.description}</div>
              </div>
            ))}
        </div>
      </div>
      <style jsx>
        {`
          .product-advantage {
            background-color: #fff;
            min-width: 1257px;
          }
          .title {
            font-size: 35px;
            text-align: center;
            height: 60px;
            line-height: 60px;
          }
          .advantage {
            width: 1000px;
            display: flex;
            height: 300px;
            margin: auto;
          }
          .item {
            height: 100%;
            width: 300px;
            background-color: cyan;
          }
          .icon {
            height: 80px;
            background-repeat: no-repeat;
            background-position: center;
          }
          .tit {
            font-size: 20px;
            text-align: center;
          }
          .des {
            margin-top: 20px;
            font-size: 14px;
            font-weight: normal;
          }
        `}
      </style>
    </>
  );
}
